<template>
  <dialog-card
    :dilogAddTitle="options.type === 'add' ? '新建变量' : '编辑变量'"
    :isVisable="options.show"
    @closeDialog="handleValueClose"
    @save="handleValueSave(formRef)"
    :isFooter="true"
  >
    <el-form ref="formRef" :model="form" label-width="100">
      <el-form-item label="变量名称">
        <el-input v-model="form.name" clearable placeholder="请输入变量名称" />
      </el-form-item>
      <el-form-item label="变量类型">
        <el-select v-model="form.valueType" placeholder="请选择">
          <el-option
            v-for="item in variableOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-tooltip
          content="说明:(简单类型如:字符串、数字，复杂类型如:对象、数组)"
          placement="top"
        >
          <el-icon size="large"><QuestionFilled /></el-icon>
        </el-tooltip>
      </el-form-item>
      <el-form-item label="变量初始值">
        <template v-if="form.valueType === 'easy'">
          <el-input
            v-model="form.value"
            clearable
            placeholder="请输入变量初始值"
          />
        </template>
        <template v-else>
          <monaco-editor
            v-model="form.value"
            width="100%"
            height="320px"
            language="javascript"
          />
        </template>
      </el-form-item>
    </el-form>
  </dialog-card>
</template>

<script setup name="VariableList">
import { ref, reactive, watch, toRefs, defineAsyncComponent } from "vue"
import DialogCard from "@lowcode/components/dialog-card"
import { QuestionFilled } from "@element-plus/icons-vue"

const monacoEditor = defineAsyncComponent(() =>
  import("@lowcode/components/MonacoEditor/index.vue")
)

const emit = defineEmits(["onSure", "onCancel"])

const props = defineProps({
  options: {
    type: Object,
    default: () => {
      return {
        show: false,
        type: "add", // 用于判断是编辑还是删除 add edit
        curVariable: null, // 当前编辑的变量
      }
    },
  },
})

const formRef = ref()
const data = reactive({
  form: {
    // 变量名称
    name: "",
    // 变量值
    value: "",
    // 变量类型
    valueType: "easy",
  },
})

const variableOptions = [
  {
    value: "easy",
    label: "简单类型",
  },
  {
    value: "complex",
    label: "复杂类型",
  },
]

// 添加、修改设备
const handleValueSave = async formEl => {
  if (!formEl) return
  await formEl.validate(valid => {
    if (valid) {
      let value =
        data.form.valueType === "easy"
          ? data.form.value ?? ""
          : JSON.parse(data.form.value ?? [])
      emit("onSure", {
        name: data.form.name,
        value: value,
        type: props.options.type,
        index: props.options.index,
        valueType: data.form.valueType,
      })
      handleValueClose()
    }
  })
}
// 关闭事件
const handleValueClose = () => {
  data.form = {
    name: "",
    value: "",
    valueType: "easy",
  }
  formRef.value.resetFields()
  emit("onCancel")
}

watch(
  () => props.options,
  val => {
    if (val.type === "edit") {
      const curVariable = JSON.parse(JSON.stringify(val.curVariable))
      for (let key in data.form) {
        data.form[key] = curVariable[key]
      }
    }
  },
  { deep: true }
)

const { form, rules } = toRefs(data)
</script>

<style lang="scss" scoped></style>
